<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        a {
            text-decoration: none;
            color: black;
        }

        ul {
            list-style: none;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .clearfix::after {
            content: '';
            clear: both;
            display: block;
        }

        .menu_bar {
            width: 1000px;
            margin: 50px auto;
            position: relative;
        }

        ul {
            width: 250px;
            height: 600px;
            background-color: rgb(243, 243, 243);
            border-right: 2px solid orange;
            border-top: 2px solid orangered;
        }

        li {
            text-align: center;
            line-height: 50px;
            width: 250px;
            height: 50px;



        }

        .menu-item.active {

            border-top: 2px solid orange;
            border-bottom: 2px solid orange;
            border-left: 2px solid orange;
            background: #fff;
            color: orange;
        }

        .content {
            position: absolute;
            top: 0;
            left: 250px;
            width: 746px;
            height: 596px;
            text-align: center;
            line-height: 300px;
            font-size: 40px;
            border-top: 4px solid orange;
            border-bottom: 2px solid orange;
            border-right: 2px solid orange;
            display: none;
        }

        .content.on {
            display: block;
        }

        .slideshow {
            width: 746px;
            height: 598px;
            text-align: center;
            line-height: 300px;
            font-size: 40px;
            border-top: 2px solid orange;
            border-bottom: 2px solid orange;
            border-right: 2px solid orange;
        }
    </style>
</head>

<body>
    <div class="menu_bar">
        <ul class="fl">
            <li class="menu-item ">
                <span>
                    <a href="#">图书、电子书、童书1</a>
                </span>
            </li>
            <li class="menu-item ">
                <span>
                    <a href="#">图书、电子书、童书2</a>
                </span>
            </li>
            <li class="menu-item ">
                <span>
                    <a href="#">图书、电子书、童书3</a>
                </span>

            </li>

            <li class="menu-item ">
                <span>
                    <a href="#">图书、电子书、童书4</a>
                </span>
            </li>
        </ul>
        <div class="slideshow fr">
            轮播图
        </div>

        <div class="content  ">
            内容1
        </div>
        <div class="content  ">
            内容2
        </div>
        <div class="content ">
            内容3
        </div>
        <div class="content ">
            内容4
        </div>
    </div>


    <script>
        //获取属性
        let menu_items = document.querySelectorAll('.menu-item');
        let conts = document.querySelectorAll('.content');
        let slideshow = document.querySelector('.slideshow');
        let ul = document.querySelector('ul');
        let as = document.querySelectorAll('a');
        //获取属性

        menu_items.forEach(function (menu_item, i) {                        //循环

            menu_item.addEventListener('click', function () {
                menu_items.forEach(function (menu_item, i) {                //循环排他，清除所有
                    menu_item.className = 'menu-item '
                    conts[i].className = 'content '
                    slideshow.style.display = 'block'
                    as[i].style.color = '#000'
                })
                //给点击的单独添加属性
                this.className = 'menu-item active'
                conts[i].className = 'content on '
                slideshow.style.display = 'none'
                as[i].style.color = 'orange'
            })

            // this.className = 'menu-item '
            // conts[i].className = 'content '
            // slideshow.style.display = 'block'
            // as[i].style.color = '#000'
        })
    </script>
</body>

</html>